﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebClient.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Ứng dụng google map API</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <%--<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDA4ADVHHljYbLQ8_Jz1UDtknpdQDFsH8E&amp;sensor=false"></script>--%>
    <script src="scripts/googlemap.js" type="text/javascript"></script>
    <script src="scripts/filterEngineOK.js" type="text/javascript"></script>
    <script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    //cac ham lien quan den viec khoi tao dau tien
        $(document).ready(function () {
            //load map
            //initialize();

            //add loadAll button click event        
            $("#btLoadAll").click(function () {
                loadAllMarker();
            });

            /// Insert Data
            $('#btInsert').click(function () {
                if ($('#sonha').val() == '') {
                    alert('Mã đường không hợp lệ');
                    return;
                }
                if (isNaN(Number($('#latitude').val())) || $('#latitude').val() == '') {
                    alert('Vĩ độ không hợp lệ');
                    return;
                }
                if (isNaN(Number($('#longitude').val())) || $('#longitude').val() == '') {
                    alert('Kinh độ không hợp lệ');
                    return;
                }

                // Đoạn này mang tính chất mô phỏng
                // Sẽ gửi 1 goi Json lên Server
                // 
                //tao json data
                var jData = {};
                jData.TenDiaDiem = $('#tendd').val();
                jData.MaDichVu = $('#madv').val();
                jData.SoNha = $('#sonha').val();
                jData.ChuThich = $('#chuthich').val();
                jData.MaDuong = $('#mad').val().split("-")[0];
                jData.MaPhuong = $('#maph').val();
                jData.MaQuanHuyen = $('#maqh').val();
                jData.MaTinhThanh = $('#matinhthanh').val();
                jData.KinhDo = $('#longitude').val();
                jData.ViDo = $('#latitude').val();

                var jsonData = JSON.stringify(jData);
                jsonData = JSON.stringify(jsonData); //convert 2 times
                $.ajax({
                    url: "http://localhost:1445/NhaTroService.svc/Add",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    data: jsonData,
                    success: function (msg) {
                        alert('success');
                    },
                    error: function (msg) {
                        alert("???");
                    }
                });
            }); // function button Insert

        }); 
    </script>
    
</head>
<body>
	<div id="header">
		<div class='main-menu'>
			<!--<ul>
			   <li class='active '><a href='index.html'><span>Home</span></a></li>
			   <li><a href='#'><span>Products</span></a>
				  <ul>
					 <li><a href='#'><span>Product 1</span></a></li>
					 <li><a href='#'><span>Product 2</span></a></li>
				  </ul>
			   </li>
			   <li><a href='#'><span>About</span></a></li>
			   <li><a href='#'><span>Contact</span></a></li>
			</ul>-->
		</div>
	</div><!--#header-->
    <div id="top">
    	<div id="logo"></div>
        <div id="search">
        	<!--<input type="text" id="keyword" /><input type="button" id="btSearch" />-->
            
                <div style="padding-bottom:5px;padding-top:10px; margin:10px">
                  <input value="" title="Tìm kiếm" type="text" id="keyword" name="keyword" style="width:60%"/>
                  &nbsp; 
                  <input class="button" value="Tìm Kiếm" id="btsearch" type="button"/>
                  &nbsp; 
                  <input class="button" value="Hiển thị toàn thành" id="btLoadAll" type="button"/>
         		</div>
        </div><!--#search-->
    </div><!--#top-->
<!--#Top-->
	<div id="container">
		<div id="left-content">
			<!--<input type="button" id="loadAll"  value="Lay tat ca nha tro"/>-->
            <div class="barTitle">Kết quả tìm kiếm</div>
            <div>
                <table border="0px" width="99%">
            <tr>
                <td width="30%">Tên địa điểm</td>
                <td><input type="text" id="tendd" style="width:97%" /></td>
            </tr> 
             <tr>
                <td height="30">Số nhà</td>
                <td><input type="text" id="sonha" style="width:97%" /> </td>
            </tr>
            <tr>
                <td>Đường</td>
                <td>
                 <input type="text" id="mad" style="width:97%" value="Nguyễn Văn Linh" /> </td>
            </tr>
            <tr>
                <td>Phường</td>
                <td>
                    <select id="maph" style="width:100%" >
                        <option value="Phường 1">1</option>
                    </select>
                 </td>
            </tr>
            <tr>
                <td>Quận </td>
                <td>
                    <select id="maqh" style="width:100%">
                        <option value="48">7</option>
                    </select>
            	</td>
            </tr>
             <tr>
                <td>Tỉnh thành     </td>
                <td>
                    <select id="matinhthanh" style="width:100%">
                        <option value="17">Hồ Chí Minh</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td >Kinh độ </td>
                <td><input type="text" id="longitude" style="width:97%" /> </td>
            </tr>
            
            <tr>
                <td>Vĩ độ</td>
                <td><input type="text" id="latitude" style="width:97%" /> </td>
            </tr>
    
             <tr>
                <td>Chú Thích</td>
                <td><textarea cols="1" rows="3" id="chuthich" style="width:97%"></textarea></td>
            </tr>        
            <tr>
              <td colspan="2"><input class="button" type="button" id="btInsert" value="Thêm"/> &nbsp; 
              <input type="button" class="button" id="btWindow" value="Bung cửa sổ" /></td>
          </tr>
        </table>
            </div>
		</div><!--#left-content-->
		<div id="right-content">
            <div id="map">            </div>
		</div><!--#right-content-->
	</div>
<!--#containner-->
</body>
</html>
